import React,{useState} from 'react'
import { View, Text,Image,ScrollView,Checkbox,CheckboxGroup } from '@tarojs/components'
import './index.scss'
import {logger} from "redux-logger/src";

function orderPage(){
  const [ orderInfo,setorderInfo ] = useState({
    isSelect: true, //选中状态
    goodsNum: 1,   // 商品总数量
    totalAmount: 888 // 商品总金额
  })

  function changeCheckSelect(e){
    // 选中状态
    if(e.detail.value.length){
      console.log(JSON.parse(e.detail.value))
    }else{
      // 取消选中状态
      setorderInfo({...orderInfo, goodsNum: 0, totalAmount: 0}) // 清空数量和价格
      console.log(e.detail.value)
    }
  }
  // 支付订单
  function paymentOrder(){
    console.log('支付')
  }
  return(
  <View className='order_page'>
    <View className='order_info'>
      <View className='or_info_add'>

      </View>
        <View className='or_info_time'>

        </View>
      <View className='or_info_take'>

      </View>
      <View className='or_info_num'>

      </View>
    </View>
    {/*支付方式*/}
    <View className='order_pay'>

    </View>
    {/*底部支付*/}
    <View className='pay_btn'>
      <View className='btn_fl'>
        <CheckboxGroup onChange={(e) => changeCheckSelect(e)}>
          <Checkbox value={orderInfo.isSelect} checked={orderInfo.isSelect}>已选 ({orderInfo.goodsNum})</Checkbox>
        </CheckboxGroup>
      </View>
      <View className='total_Price'>
        ￥{orderInfo.totalAmount}
      </View>
      <View className='btn_fr' onClick={() => paymentOrder()}>
        <Text>结算</Text>
      </View>
    </View>
  </View>
  )
}

export default orderPage
